<script setup lang="ts">
import type { CategoryItem } from '@/types/home'
import { ref } from 'vue'

defineProps<{
  source: CategoryItem[]
}>()

// 响应数据
let cursorLeft = ref('0%')

// 滚动事件
const onScroll = (ev: UniHelper.ScrollViewOnScrollEvent) => {
  const { scrollLeft, scrollWidth } = ev.detail
  cursorLeft.value = (scrollLeft / scrollWidth) * 100 + '%'
}
</script>

<template>
  <view class="entries">
    <scroll-view class="scroll-view" scroll-x enhanced @scroll="onScroll">
      <view class="navs">
        <view class="navs-item" v-for="i in 2" :key="i">
          <navigator
            class="navigator"
            hover-class="none"
            url="/pages/goods/list/index"
            v-for="item in source"
            :key="item.id"
          >
            <image class="icon" :src="item.icon"></image>
            <text class="text">{{ item.name }}</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
/* 前台类目 */
.entries {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  .navs {
    display: flex;
    width: 200%;
  }
  .navs-item {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    text-align: center;
    min-height: 328rpx;
    box-sizing: border-box;
  }
  .navigator {
    width: 150rpx;
    margin-bottom: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
  .scroll-bar {
    width: 100rpx;
    height: 6rpx;
    margin: auto;
    border-radius: 6rpx;
    background-color: #e2e2e2;
    position: relative;
    .cursor {
      width: 50%;
      height: 100%;
      background-color: #28bb9c;
      border-radius: 6rpx;
      position: absolute;
      left: 0;
    }
  }
}
</style>
